<template>
  <div class="pre-order">
    <h1 class="confirm-title">确认订单</h1>
    <el-table :data="data" style="width: 100%">
      <el-table-column label="充值产品" align="center">
        <template v-slot="{ row }">
          <img
            class="vipImg"
            :src="row.imageUrl"
            width="40%"
            style="vertical-align: middle"
            alt=""
          />
          <span style="color: rgb(244, 193, 79)">{{ row.productName }}</span>
          <br />
          <span>{{ row.description }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="单价" align="center">
      </el-table-column>
      <el-table-column prop="address" label="数量" align="center">
        <template v-slot="{row}">
          <el-input-number
            v-model="quantity"
            :min="1"
            :max="data[0].inventory"
            label="描述文字"
          ></el-input-number>
          <i v-if="false">{{row}}</i>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="小计" align="center">
        {{total_fee}}元
      </el-table-column>
    </el-table>
    <div class="total-fee">
      <div class="box-wrap">
        <div class="box-shadow">
          <span
            class="realpay--title"
            data-spm-anchor-id="a210c.1.0.i0.52681deblyKpHg"
            >实付款：</span
          >
          <span class="realpay--price-symbol">¥</span>
          
          <span class="realpay--price" style="color: rgb(255, 80, 0)">
            {{total_fee}}元
          </span>
          <div class="order-confirmAddr">
            <div class="confirmAddr-addr-user">
              <span class="confirmAddr-title">充值详情：</span
              ><span class="confirmAddr-pro">{{ data[0].description }}</span>
            </div>
            <div class="confirmAddr-addr">
              <span class="confirmAddr-title">充值账户：</span
              ><span class="confirmAddr-usn">{{ userInfo.username }}</span>
              &nbsp;&nbsp;
              <span class="confirmAddr-title">昵称：</span
              ><span class="confirmAddr-usn">{{ userInfo.nickname }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="btn">
        <el-button type="danger" @click="commitOrder">提交订单</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import * as payApi from "@/api/pay"
export default {
  //表格中展示的data数据必须是数组，而此时vuex中存储的currentProduct是一个对象，所以需要转换
  // computed: mapState({
  //   data: (state) => [state.currentProduct],
  //   userInfo: (state) => state.userInfo,
  //   total_fee(){
  //     return this.quantity*this.data[0].price
  //   }
  // }),
  methods: {
    commitOrder(){
      //提交订单方法
      //先做交互，让用户确定
      this.$confirm("您确定要提交订单?订单详情"+this.data[0].description,"提交订单提示",{
        type: "warning"
      })
      .then(async ()=>{
        //点击确定按钮
        //1.下订单 调用接口,不需要传金额，只需要传产品id和数量即可，后台会自己计算
        let orderRes=await payApi.order(this.data[0].product_id,this.quantity)
        //console.log(orderRes.data.state);
        let {order_id}=orderRes.data
        //console.log(order_id);
        //2.跳转到支付页面，name: pay; 通过query传参的方式将订单id传给支付页面
        if(orderRes.data.state){
          this.$router.push({
            name: "pay",
            query: {
              order_id: orderRes.data.order_id
            }
          })
        }
      })
      .catch(()=>{
        //点击取消按钮
        this.$message.error("已取消订单提交")
      })
    }
  },
  computed: {

    ...mapState({
      //下单产品对象
      data: (state)=>[state.currentProduct],
      //用户信息
      userInfo: (state)=>state.userInfo
    }),

    //计算总价
    total_fee(){
      return (this.quantity*this.data[0].price).toFixed(2)//保留两位小数，处理精度丢失的问题
    }
  },
  data() {
    return {
      currentChargeProduct: [],
      quantity: 1,
    };
  },
};
</script>
<style lang="less" scoped>
.vipImg {
  padding-right: 10px;
}
.price {
  color: #ff0036;
  font-weight: bolder;
}
.total_fee {
  font-size: 16px;
  color: #ff0036;
}
.el-button {
  width: 180px;
  border-radius: 0;
}
.confirm-title {
  text-align: left;
  margin-bottom: 30px;
}
.pre-order {
  padding: 80px 100px 0 100px;
}
.total-fee {
  margin-top: 50px;
  text-align: right;
}
.box-wrap {
  display: inline-block;
  border: 1px solid #ff0036;
  .box-shadow {
    border: 3px solid #fff0e8;
    min-width: 300px;
    padding: 10px 5px 10px 20px;
    .realpay--title {
      font-weight: 700;
      color: #333;
    }
    .realpay--price-symbol {
      font-size: 26px;
      margin-right: 4px;
      color: #999;
    }
    .realpay--price {
      color: #ff0036;
      font: 700 26px tahoma;
    }
    .order-confirmAddr {
      line-height: 1.6;
      font-weight: bolder;
      margin-top: 10px;
      font-size: 16px;
      // text-align: center;
      // font-family: "PingFang SC";
      .confirmAddr-usn {
        color: #ff0036;
        font-size: 20px;
      }
      .confirmAddr-pro {
        color: goldenrod;
        font-size: 16px;
      }
    }
  }
}
</style>